<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="div_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("所属代理商") }}：</p>
        <div
          class="content font14 text_black u-f u-f-ac"
          @click="openAgentList"
        >
          <p class="text-ellipsis">{{ agent ? agent : $t("选择代理商") }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearAgent">
          {{ $t("清除") }}
        </button>
      </div>
      <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">{{ $t("提交") }}</button>
    </div>
    <div class="head_options u-f u-f-ac u-fw">
      <button
        class="sub_btn font14 text_white bg_blue"
        @click="addMaterial"
        v-if="permissions.indexOf('/screenadv/addGroup') != -1"
      >{{$t('添加广告分组')}}</button>
    </div>
     <!-- 12.19 测试 -->
    <div>
      <el-table :data="tableData">
        <el-table-column prop="name" :label="$t('名称')"></el-table-column>
        <el-table-column prop="size" :label="$t('文件大小')"></el-table-column>
        <el-table-column prop="uploader" :label="$t('上传者')"></el-table-column>
        <el-table-column prop="image_num" :label="$t('图片个数')"></el-table-column>
        <el-table-column prop="video_num" :label="$t('视频个数')"></el-table-column>
        <el-table-column prop="duration" :label="$t('视频时长')"></el-table-column>
        <el-table-column prop="created" :label="$t('创建时间')"></el-table-column>
        <el-table-column :label="$t('操作')" width="200">
          <template slot-scope="scope">
            <el-button
              v-if="permissions.indexOf('/screenadv/editGroup') != -1"
              type="primary"
              size="mini"
              @click="updateMaterial(scope.row)"
            >{{$t('修改')}}</el-button>
            <el-button
              v-if="permissions.indexOf('/screenadv/deleteGroup') != -1"
              type="danger"
              size="mini"
              @click="deletes(scope.row)"
            >{{$t('删除')}}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 添加和修改广告分组 -->
    <el-dialog
      width="900px"
      :title="isUpdate ? $t('修改广告分组') : $t('添加广告分组') "
      :visible.sync="showUpdate"
      :close-on-click-modal="false"
    >
      <div class="order_detail">
        <div class="ipt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{$t('名称')}}：</span>
          </p>
          <el-input v-model="addFrom.name" :placeholder="$t('请输入素材名称')"></el-input>
        </div>
        <div class="upload_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{$t('广告素材')}}：</span>
          </p>
          <el-button size="small" type="primary" @click="changeMater">{{$t('选择广告素材')}}</el-button>
          <p class="tip font14 text_danger">{{$t('拖动广告素材可排序')}}</p>
        </div>

        <div v-if="fileslist.length > 0">
          <draggable class="list_box u-f u-fw" v-model="fileslist" group="people">
            <div class="thumbnail" v-for="(item, index) in fileslist" :key="index">
              <img class="img" :src="item.file" v-if="item.type == 'image'" />
              <img class="img" :src="item.file + '_thumb.jpg'" v-if="item.type == 'video'" />
              <img class="icon" src="../../assets/img/ic_dele.png" @click="deleteImg(index)" />
              <img class="icon_play" src="../../assets/img/ic_play.png" v-if="item.type == 'video'" />
              <div class="txt_box">
                <p class="txt font14 text_black">{{$t('名称')}}：{{ item.name }}</p>
                <p
                  class="txt font14 text_black"
                >{{$t('类型')}}：{{ item.type == "video" ? $t('视频') : $t('图片') }}</p>
                <p class="txt font14 text_black">{{$t('大小')}}：{{ item.size }}</p>
                <p
                  class="txt font14 text_black"
                  v-if="item.type == 'video'"
                >{{$t('时长')}}：{{ item.duration }}</p>
                <div class="ipt_box">
                  <span class="font14 text_black">{{$t('停留')}}：</span>
                  <el-input :value="item.time" @input="handleStopTime($event, item, index)"></el-input>
                  <span class="font14 text_black">{{$t('秒')}}</span>
                </div>
              </div>
            </div>
          </draggable>
        </div>

        <button
          class="update_btn font12 bg_blue text_white"
          v-if="!isUpdate"
          @click="addSubmit"
        >{{$t('提交')}}</button>
        <button
          class="update_btn font12 bg_blue text_white"
          v-if="isUpdate"
          @click="updateSubmit"
        >{{$t('提交')}}</button>
      </div>
    </el-dialog>

    <adver-material ref="adverMaterial" @hide="confirm"></adver-material>
    <agent-list ref="agentList" @hide="closeAgentList"></agent-list>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import adverMaterial from "components/adver/adver-material.vue";
import agentList from "components/agent-list/agent-list.vue";
import draggable from "vuedraggable";
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
  name: "screenadv-groupList",
  data() {
    return {
      page: 1,
      page_size: 20,
      total: 0,
      agent: '',
      aid: '',
      tableData: [],
      isUpdate: false,
      showUpdate: false,
      addFrom: {
        id: "",
        name: ""
      },
      fileslist: []
    };
  },
  computed: {
    ...mapState(["permissions"])
  },
  components: {
    adverMaterial,
    draggable,
    agentList,
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.agent = "";
      this.aid = "";
      this.getData()
    },
    getData() {
      util
        .$http("/screenadv/groupList?page=" + this.page, {
          page_size: this.page_size,
          agency_id: this.aid
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });
    },
    openAgentList() {
      this.$refs.agentList.show();
    },
    closeAgentList(data) {
      this.agent = data.name;
      this.aid = data.id;
    },
    clearAgent() {
      this.agent = "";
      this.aid = "";
    },
    addMaterial() {
      this.addFrom = {
        id: "",
        name: ""
      };
      this.fileslist = [];
      this.isUpdate = false;
      this.showUpdate = true;
    },
    confirm(data) {
      for (let item of data) {
        item.time = 3;
        item.material_id = item.id;
        this.fileslist.push(item);
      }
    },
    handleStopTime(val, item, index) {
      item.time = val;
      this.$set(this.fileslist, index, item);
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData()
    },
    changeMater() {
      this.$refs.adverMaterial.show();
    },
    addSubmit() {
      let arr = [];
      for (let index in this.fileslist) {
        arr.push({
          material_id: this.fileslist[index].material_id,
          sort: Number(index) + 1,
          time: Number(this.fileslist[index].time)
        });
      }
      util
        .$http("/screenadv/addGroup", {
          name: this.addFrom.name,
          details: JSON.stringify(arr)
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.addFrom = {
              id: "",
              name: ""
            };
            this.fileslist = [];
            this.getData();
            this.showUpdate = false;
          }
        });
    },
    updateSubmit() {
      let arr = [];
      for (let index in this.fileslist) {
        arr.push({
          material_id: this.fileslist[index].material_id,
          sort: Number(index) + 1,
          time: Number(this.fileslist[index].time)
        });
      }
      util
        .$http("/screenadv/editGroup", {
          id: this.addFrom.id,
          name: this.addFrom.name,
          details: JSON.stringify(arr)
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.addFrom = {
              id: "",
              name: ""
            };
            this.fileslist = [];
            this.getData();
            this.showUpdate = false;
          }
        });
    },
    deleteImg(index) {
      this.fileslist.splice(index, 1);
    },
    updateMaterial(row) {
      this.isUpdate = true;
      this.showUpdate = true;
      this.addFrom.id = row.id;
      this.fileslist = [];
      setTimeout(() => {
        util
        .$http("/screenadv/groupDetail", {
          id: row.id
        })
        .then(res => {
          if (res.code == 1) {
            this.addFrom.name = res.data.data.name;
            this.fileslist = res.data.data.details;
          }
        });
      }, 150);
    },
    deletes(row) {
      this.$confirm(this.$t("是否要删除当前分组"))
        .then(() => {
          util
            .$http("/screenadv/deleteGroup", {
              id: row.id
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .div_box {
  margin-right: 20px;
}
.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.head_search .div_box .content:active {
  border-color: #409eff;
}
.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.head_options .sub_btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}
.head_options .txt_list {
  font-weight: bold;
  margin-right: 25px;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.order_detail .ipt_list {
  margin-bottom: 20px;
}
.order_detail .ipt_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .ipt_list .el-input {
  width: 200px;
}
.order_detail .radio_list {
  margin-bottom: 20px;
}
.order_detail .radio_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .upload_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .upload_list .tip {
  width: 300px;
  margin: 0 0 0 15px;
}
.order_detail .update_btn {
  cursor: pointer;
  padding: 10px 20px;
  border: 0;
  outline: 0;
  border-radius: 4px;
  margin-top: 40px;
}
.detail_img {
  max-width: 900px;
  height: auto;
}
.list_box {
  margin-top: 25px;
}
.list_box .thumbnail {
  position: relative;
  width: 240px;
  padding: 4px;
  border: 1px solid #ddd;
  cursor: move;
  border-radius: 4px;
  box-sizing: border-box;
  margin-right: 56px;
  margin-bottom: 20px;
}
.list_box .thumbnail:nth-of-type(3n) {
  margin-right: 0;
}
.list_box .thumbnail .icon {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  width: 32px;
  height: 32px;
}
.list_box .thumbnail .icon_play {
  position: absolute;
  right: 96px;
  top: 98px;
  width: 50px;
  height: 50px;
}
.list_box .thumbnail .img {
  width: 230px;
  height: 240px;
}
.list_box .thumbnail .txt_box {
  padding: 9px;
}
.list_box .thumbnail .txt {
  margin: 0 0 5px 0;
}
.list_box .thumbnail .ipt_box .el-input {
  width: 80px;
  margin-right: 10px;
}
</style>
<style>
.list_box .thumbnail .el-input__inner {
  height: 36px;
  line-height: 36px;
}
</style>